<div class="bg-white my-4 p-4">
    <div class="flex items-center border-b border-b-2 border-gray-500 py-1 w-full md:w-1/2">
        <input
            class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
            type="text"
            wire:model.lazy="title"
            placeholder="{{__('Title')}}"
        >
    </div>
    <x-jet-input-error for="title" class="mt-2 text-xs" />
    <div class="flex items-center border-b border-b-2 border-gray-500 py-1 w-full md:w-1/2 mt-4">
        <textarea
            wire:model.lazy="content"
            placeholder="{{__('Content')}}"
            class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"></textarea>
    </div>
    <x-jet-input-error for="content" class="mt-2 text-xs" />
    <x-jet-label class="my-2">{{__('Category')}}</x-jet-label>
    <div class="inline-block relative w-64">
        <select wire:model="category_id" class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
            @foreach($categories as $category)
                <option value="{{$category->id}}">{{$category->title}}</option>
            @endforeach
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
    </div>
    <x-jet-input-error for="category_id" class="mt-2 text-xs" />
    <div class="mt-4">
        <x-jet-button wire:click="save" wire:loading.attr="disabled">{{__('Save')}}</x-jet-button>
    </div>
</div>

